<!doctype html>
<html lang="en">
<head>
    <title>BarChart - Overview</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="%description%" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    
    <script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <script src="../../external/globalize.min.js" type="text/javascript"></script>
    <script src="../../external/raphael-min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.raphael.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijchartcore.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijbarchart.js" type="text/javascript"></script>
    <script id="scriptInit" type="text/javascript">
    	$(document).ready(function () {
    		$("#wijbarchart").wijbarchart({
    			axis: {
    				y: {
    					text: "Total Hardware"

    				},
    				x: {
    					text: ""
    				}
    			},
    			hint: {
    				content: function () {
    					return this.data.label + '\n ' + this.y + '';
    				}
    			},
    			header: {
    				text: "Hardware Distribution"
    			},
    			seriesList: [{
    				label: "West",
    				legendEntry: true,
    				data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [5, 3, 4, 7, 2] }
    			}, {
    				label: "Central",
    				legendEntry: true,
    				data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [2, 2, 3, 2, 1] }
    			}, {
    				label: "East",
    				legendEntry: true,
    				data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [3, 4, 4, 2, 5] }
    			}]
    		});
    	});
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Overview</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <div id="wijbarchart" class="ui-widget ui-widget-content ui-corner-all" style="width: 756px; height: 475px">
            </div>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>The Wijmo Bar Chart widget (wijbarchart) allows you to create customized bar charts from various data sources. 
            The samples in this section highlight some of the unique features of this widget. 
            This particular sample demonstrates some of the basic features of the wijbarchart widget. 
            The source in this sample will show you how to set the text of the X axis and Y axis; how to add a header to the chart; how to add label text to the legend; and how to populate the chart with data.

            </p>
        </div>
    </div>
</body>
</html>
